<template>
  <swiper class="swiper" :options="swiperOptions">
    <swiper-slide v-for="(page,index) in pages" :key="index">
      <icons :icons="page"></icons>
    </swiper-slide>
  </swiper>
</template>

<script>
import Icons from "./Icons"
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'


export default {
  name: 'HomeIcons',
  components: { Icons, Swiper, SwiperSlide, },
  data () {
    return {
      swiperOptions: {
        loop: true,
      },
      iconList: [
        {
          id: 'i0001',
          title: "景点门票",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
        },
        {
          id: 'i0002',
          title: "织金洞半价",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/87/20656da0ac042002.png'
        },
        {
          id: 'i0003',
          title: "本地玩乐",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/f5/a963333e1fa802.png'
        },
        {
          id: 'i0004',
          title: "彝山花谷",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/4c/eac47dd8def8de02.png'
        },
        {
          id: 'i0005',
          title: "全部玩乐",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png'
        },
        {
          id: 'i0006',
          title: "百里杜鹃",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/4c/eac47dd8def8de02.png'
        },
        {
          id: 'i0007',
          title: "景点门票",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
        },
        {
          id: 'i0008',
          title: "织金洞半价",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/87/20656da0ac042002.png'
        },
        {
          id: 'i0009',
          title: "本地玩乐",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/f5/a963333e1fa802.png'
        },
        {
          id: 'i0010',
          title: "彝山花谷",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/4c/eac47dd8def8de02.png'
        },
        {
          id: 'i0011',
          title: "全部玩乐",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png'
        },
        {
          id: 'i0012',
          title: "百里杜鹃",
          iconUrl: 'https://imgs.qunarzz.com/piao/fusion/1803/4c/eac47dd8def8de02.png'
        },

      ],
    }
  },
  computed: {
    pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

<style></style>